<template>
  <div class="tou">
      <van-nav-bar title="图文资讯" left-text="返回" left-arrow
      @click-left="$router.back()"
      >
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>
<div class="news" 
v-for="item in zixunList"
:key="item.id"
 @click="$router.push({path :`/layout/myNewsDetial/${item.id}`})"
>
  <img :src="item.img_url" alt="" class="img">
  <div class="div1">
  <p>{{item.title}}</p>


  <span class="dian2">发表时间：{{item.add_time|filters}}</span>
  <i class="dian">点击:{{item.click}}</i>

  </div>
</div>
  </div>
</template>

<script>
import {getPageTextData} from '../../apis/api'
export default {
data () {
  return {
    zixunList:[]
  }

},
async created () {
  const res = await getPageTextData()
  console.log(res);
  this.zixunList = res.message
}
}
</script>

<style lang="less" scoped>
.tou{
  margin: 0;
  padding: 0;
  .news{
    // background-color: aqua;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid rgb(219, 216, 216);
    .img{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      
      
    }
    .div1{
      display: flex;
      align-items: center;
      flex-direction: column;
      .dian2{
        color: aqua;
        font-size: 14px;
        margin-left: -70px;
      }
      .dian{
        color: aqua;
        // margin-right: 5px;
        font-size: 14px;
        margin-right: -265px;
        position: relative;
        margin-bottom: 20px;

       

       
      }
    }
  
  }
}
</style>